<template>
	<view class="searchPage">
		<!-- <u-navbar :title="id?'编辑纪念馆':'创建纪念馆'" :placeholder="true" leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
			:titleStyle="titleStyle"></u-navbar> -->
			<headerinfo></headerinfo>
<!-- <headertop :inv="4"></headertop> -->
				<backos></backos>
		<view class="guanmain">
			<view class="inputbox">
				<span>纪念馆名称 <i style="color: red;">*</i> </span>
				<input v-model="form.museumName" type="text" placeholder="示例值(康氏祠堂)" />
			</view>
			<view class="inputbox">
				<span>纪念馆主题 <i style="color: red;">*</i> </span>
				<input v-model="form.museumTheme"  type="text" maxlength="8" placeholder="示例值(先辈们永垂不朽！)" />
			</view>
			<view class="inputbox" @click="checkguan" style="cursor: pointer;">
				<span>纪念馆风格 <i style="color: red;">*</i> </span>
				<!-- <input type="text" v-model="checkGuan.styleName" disabled placeholder="请选择" /> -->
				<span style="width: 450px;">{{checkGuan.styleName?checkGuan.styleName:'请选择'}}</span>
				<u-icon name="arrow-right"></u-icon>
			</view>
			
			<view class="inputbox">
				<span>立碑人 <i style="color: red;">*</i></span>
				<input v-model="form.museumBuilder" type="text" placeholder="请输入" />
			</view>
			<view class="inputbox">
				<span>家族祖籍 <i style="color: red;">*</i></span>
				<input v-model="form.ancestralHome" type="text" placeholder="示例值(上海)" />
			</view>
			
		</view>
		<view class="create" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				id:'',
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				guanIndex: 1,
				guanlist: ['个人馆', '家族馆', '双人馆'],
				checkGuan:{
					docId:'',
					styleImageUrl:'',
					styleName:'',
				},
				form:{
					museumName:"",
					museumTheme:"",
					museumStyleName:"",
					museumBuilder:"",
					ancestralHome:'',
					museumStyleImageUrl:'',
					familyId: uni.getStorageSync('familyId') ? uni.getStorageSync('familyId')[0] : '',
				}
			};
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.getInfo()
			}
			if(e.docId){
				this.form.familyId = e.docId
			}
			
			uni.$on('checkguanStyle',(data)=>{
                console.log(data);
                // TODO 下面执行刷新的方法
				this.checkGuan = data
            })
		},
		methods: {
			getInfo(){
				let data = {
					museumId:this.id
				}
				this.$api.museumgetMuseum(data).then(res=>{
					console.log(res)
					this.form = res.museum
					this.checkGuan.styleName = this.form.museumStyleName
					this.checkGuan.styleImageUrl = this.form.museumStyleImageUrl
				})
			},
			toCreate() {
				uni.navigateTo({
					url: '/pagesobit/obit/create'
				})
			},
			changeGuan(index) {
				this.guanIndex = index
			},
			
			checkguan(){
				uni.navigateTo({
					url:'/pagesobit/obit/jinianguan'
				})
			},
			submit(){
				if(this.form.museumName == ''){
					return this.$Show.show('纪念馆名称不能为空')
				}
				
				if(this.form.museumTheme == ''){
					return this.$Show.show('纪念馆主题不能为空')
				}
				
				if(this.checkGuan.styleName == ''){
					return this.$Show.show('纪念馆风格不能为空')
				}
				
				if(this.form.museumBuilder == ''){
					return this.$Show.show('立碑人不能为空')
				}
				
				if(this.form.ancestralHome == ''){
					return this.$Show.show('家族祖籍不能为空')
				}
				
				this.form.museumStyleName = this.checkGuan.styleName
				this.form.museumStyleImageUrl = this.checkGuan.styleImageUrl
				
				if(this.id){
					this.form.museumId = this.id
					this.$api.museumupdateMuseum(this.form).then(res=>{
						this.$Show.successJump('编辑成功')
					})
				}else{
					this.$api.museuminsertMuseum(this.form).then(res=>{
						this.$Show.successJump('创建成功')
						uni.setStorageSync('needRefresh', '1')
					})
				}
				
			}
		}
	};
</script>


<style lang="scss" scoped>
	
	.tablist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		background-color: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		span {
			width: 33.3%;
			text-align: center;
			border-bottom: 2px solid #fff;
			padding-bottom: 20rpx;
		}

		.active {
			color: #de4849;
			border-color: #de4849;
		}
	}

	.searchPage {
		width: 100%;
		height: 100vh;
		background-size: 100%;
		background-color: #fff;
	}

	.create {
		width: 600rpx;
		height: 90rpx;
		background: #de4849;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx auto;
		border-radius: 20rpx;
		cursor: pointer;
	}
	
	.guanmain{
		margin-top: 20rpx;
		width: 600px;
		margin: 0 auto;
		box-shadow: 0 0 3px #ccc;
		border-radius: 20rpx;
		position: relative;
		overflow: hidden;
		.inputbox{
			height: 110rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 0 20rpx;
			border-bottom: 1px solid #f8f8f8;
			span{
				margin-right: 20rpx;
				white-space: nowrap;
				min-width: 170rpx;
				display: flex;
			}
			input{
				width: 80%;
			}
		}
	}
</style>